<template>
	<div v-show="visible" class="ch-picker">
		<div class="ch-picker__mask" :class="{'mask-show':maskVisible}" @tap.stop.prevent="maskHandle"></div>
		<div class="ch-picker__content" :class="[`ch-picker__content-${position}`,{'show':maskVisible}]"
			:style="{'--contentWidth':actWidth}">
			<div class="ch-picker__content-toolbar" style="margin-top: 55rpx;">
				<div>选择预约时间</div>

			</div>

			<div class="ch-picker__content-columns">
				<div class="ch-picker__content-column" :style="{'--col':columns.length}"
					v-for="(column,index) in columns" :key="index">
					<ch-picker-view :column="column" :itemHeight="itemHeight" :visibleCount="actVisibleCount"
						:itemStyle="itemStyle" :defaultIndex="defaultIndex[index]" :fields="fields"
						:colCount="columns.length" :colIndex="index" @change="(e)=>indexChange(index,e)">
					</ch-picker-view>
				</div>
			</div>
			<view class="" style="height: 30rpx;"></view>
			<view class="dianji" @click="querem">
				确定
			</view>
			<view class="" style="height: 30rpx;"></view>
		</div>
	</div>
</template>

<script>
	function formatPropSize(size) {
		let tUnit = 'px'
		let result = ''
		if (typeof size === 'string') {
			result = parseFloat(size)
			tUnit = size.replace(result.toString(), '')
			result = `${result}${tUnit}`
		} else if (typeof size === 'number') {
			result = `${size}${tUnit}`
		}
		return result
	}

	export default {
		props: {
			// 点击遮罩层关闭
			clickMaskClose: {
				type: Boolean,
				default: true
			},

			// 默认选中值的下标，是数组
			defaultIndex: {
				type: Array,
				default: () => []
			},
			// 悬浮位置 top/center/bottom
			position: {
				type: String,
				default: 'bottom'
			},
			// 每列中可见选项的数量，最大为5,最小为3
			visibleCount: {
				type: [String, Number],
				default: 5
			},
			// position为center时生效
			// 不含单位时，默认单位是px
			width: {
				type: [String, Number],
				default: '60vw'
			},


			// 子级使用 - start
			// 单个选项的高度，会覆盖itemStyle内的height；
			// 单位是px
			itemHeight: {
				type: [String, Number],
				default: 44
			},
			// 单个选项样式
			itemStyle: {
				type: Object,
				default: () => {}
			},
			// 数组属性
			fields: {
				type: Object,
				default: () => {
					return {}
				}
			},
			cont: {
				type: [String, Number],
				default: 0
			},
		},
		data() {
			return {
				visible: false,
				maskVisible: false,
				curIndexs: new Array(),
				visibleCountMax: 5, // 每列中最多可见选项的数量
				visibleCountMin: 3, // 每列中最少可见选项的数量
				columns: [],
				one: 0,
				two: 0,
				three: 0
			}
		},
		computed: {
			// 实际面板的宽度
			actWidth() {
				return formatPropSize(this.width)
			},
			// 实际每列中可见选项的数量 主要是统一变量类型
			actVisibleCount() {
				let result = typeof this.visibleCount === 'string' ? parseFloat(this.visibleCount) : this.visibleCount
				result = result > this.visibleCountMax ? this.visibleCountMax : result
				result = result < this.visibleCountMin ? this.visibleCountMin : result
				return result
			},
		},
		watch: {
			defaultIndex: {
				handler(nVal, oVal) {
					if (typeof nVal !== 'object') {
						return
					}
					this.curIndexs = JSON.parse(JSON.stringify(nVal))
				},
				deep: true,
				immediate: true
			},
		},
		created() {
			this.cread()
		},
		methods: {
			cread() {
				let cont
				if(this.cont==1){
					 cont = [
						[{
							label: '明天',
							value: '明天'
						},
						
						],
						[],
						[{
							label: 5 + '分',
							value: 5 + '分'
						}]
					]
					cont[0].push({
						label: this.fun_date(3),
						value: this.fun_date(3)
					})
					cont[0].push({
						label: this.fun_date(4),
						value: this.fun_date(4)
					})
					for (let i = 0; i < 24; i++) {
						if (i < 24) {
							cont[1].push({
								label: i + '点',
								value:  i + '点'
							})
						}
					}
				}else{
					 cont = [
						[{
							label: '今天',
							value: '今天'
						}, {
							label: '明天',
							value: '明天'
						}],
						[],
						[{
							label: 5 + '分',
							value: 5 + '分'
						}]
					]
					cont[0].push({
						label: this.fun_date(2),
						value: this.fun_date(2)
					})
					var myDate = new Date;
					var hours = myDate.getHours() + 1; //获取当前小时
					for (let i = 0; i < 24; i++) {
						if (hours + i < 24) {
							cont[1].push({
								label: hours + i + '点',
								value: hours + i + '点'
							})
						}
					}
				}
				for (let k = 5; k < 20; k++) {
					cont[2].push({
						label: k + 5 + '分',
						value: k + 5 + '分'
					})
				}
				this.columns = cont
			},
			fun_date(aa) {
				var date1 = new Date(),
					time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate(); //time1表示当前时间
				var date2 = new Date(date1);
				date2.setDate(date1.getDate() + aa);
				var time2 = (date2.getMonth() + 1) + "月" + date2.getDate() + '日'
				return time2
			},
			show() {
				this.visible = true
				setTimeout(() => {
					this.maskVisible = true
				}, 250)
			},
			hide() {
				this.maskVisible = false
				setTimeout(() => {
					this.visible = false
				}, 250)
			},
			maskHandle() {
				if (!this.clickMaskClose) {
					return
				}
				this.hide()
			},
			formatReturn() {
				let tIndexs = []
				let tColumns = []
				for (let i = 0; i < this.columns.length; i++) {
					let tIndex = this.curIndexs[i] || 0
					tIndexs.push(tIndex)
					tColumns.push(this.columns[i][tIndex])
				}
				return {
					indexs: tIndexs,
					columns: tColumns,
				}
			},
			querem() {
				var date1 = new Date(),
					time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate(); //time1表示当前时间
let seconds = date1.getSeconds(); //获取当前秒
				let dayTime = this.columns[0][this.one].value
				if (dayTime == '今天') {
					dayTime = this.fun_date(0)
				}
				if (dayTime == '明天') {
					dayTime = this.fun_date(1)
				}
				let mont = dayTime.split('月')
				let day = mont[1].split('日')
				day = day[0]
				mont = mont[0]
				
				if (mont < 10) {
					mont = '0' + mont
				}
				if (day < 10) {
					day = '0' + day
				}
				let hours = this.columns[1][this.two].value
				hours = hours.split('点')
				hours = hours[0]
				if (hours < 10) {
					hours = '0' + hours
				}
				let min = this.columns[2][this.three].value
				min = min.split('分')
				min = min[0]
				if (min < 10) {
					min = '0' + min
				}
				let time = date1.getFullYear() + "-" + mont + '-' + day+' '+hours+':'+min+':'+seconds

			

				this.$emit('confirmTime', time)

			},

			indexChange(index, e) {
				if (index == 0 ) {
					this.one = e
					let mood = []
					if (e == 1 || e == 2) {
						for (let i = 0; i < 24; i++) {
							mood.push({
								label: i + '点',
								value: i + '点'
							})
						}
						this.columns[1] = mood
					} else {
						let mood = []
						var myDate = new Date;
						var hours = myDate.getHours() + 1; //获取当前小时
						for (let i = 0; i < 24; i++) {
							if (hours + i < 24) {
								mood.push({
									label: hours + i + '点',
									value: hours + i + '点'
								})
							}
						}
						this.columns[1] = mood
					}
				} else if (index == 1) {
					this.two = e
				} else {
					this.three = e
				}
				this.$forceUpdate()

			}
		}
	}
</script>
<style lang="scss" scoped>
	.dianji {
		width: 620rpx;
		height: 90rpx;
		background-color: #02A7F0;
		border-radius: 10rpx;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
		line-height: 90rpx;
		margin: 0 auto;
	}

	.ch-picker {
		color: initial;

		.ch-picker__mask {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 1023;
			background-color: rgba(0, 0, 0, 0.5);

			opacity: 0;
			transition: all .5s;

			&.mask-show {
				opacity: 1;
			}
		}

		.ch-picker__content {
			position: fixed;
			background-color: #fff;
			border-radius: 4px;
			z-index: 1024;
			transition: all .5s;
			display: flex;
			flex-direction: column;

			.ch-picker__content-toolbar {
				height: 30px;
				padding: 0 15px;
				font-size: 36rpx;
				font-weight: bold;
				papadding-top: 55rpx;

				// background-color: #f8f8f8;
				>div:last-child {}
			}

			.ch-picker__content-columns {
				padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
				padding-bottom: calc(24rpx + env(safe-area-inset-bottom));


				display: flex;
				align-items: center;

				.ch-picker__content-column {
					width: calc(100% / var(--col));
					flex: 0 0 auto;
				}
			}
		}

		.ch-picker__content-top {
			top: 0;
			left: 0;
			width: 100vw;
			transform: translateY(-100%);
			flex-direction: column-reverse;

			&.show {
				transform: translateY(0);
			}
		}

		.ch-picker__content-center {
			top: 50%;
			left: 50%;
			width: var(--contentWidth);
			transform: translate(-50%, -50%) scale(0);

			&.show {
				transform: translate(-50%, -50%) scale(1);
			}
		}

		.ch-picker__content-bottom {
			bottom: 0;
			left: 0;
			width: 100vw;
			transform: translateY(100%);

			&.show {
				transform: translateY(0);
			}
		}

		::-webkit-scrollbar {
			display: none;
		}
	}
</style>